<template>
    <BaseModal :title="title" v-model="dialogShow" @confirm="handlerConfirm">
        <scroll-view class="list-box" >
            <view class="seacrch-box">
                <up-search placeholder="" v-model="keyword" @search="handleSearch"></up-search>
            </view>
            <!-- <up-checkbox-group placement="column" v-model="selList" @click.prevent="handlerCheckBoxChange"> -->
                <up-checkbox-group placement="column" v-model="selList">
                <up-cell v-if="allowCutsom && keyword.length>0" @click="handlerClickItem(cuttomData)">
                    <template #title>
                        <view class="check-item">
                            <up-checkbox :name="-1"></up-checkbox>
                            <view>自定义：{{ keyword }}</view>
                        </view>
                    </template>
                </up-cell>
                <up-cell v-for="(item,idx) in inList" :key="'selItem-'+idx" @click="handlerClickItem(item)">
                    <template #title>
                        <view class="check-item">
                            <up-checkbox :name="item[valueKey]"></up-checkbox>
                            <view>{{ item[labelKey] }}</view>
                        </view>
                    </template>
                </up-cell>
            </up-checkbox-group>
        </scroll-view>
    </BaseModal>
</template>

<script lang="ts">
    import { MyHttps } from "../../utils/utils";
    import BaseModal from "./BaseModal.vue"

    export default {
        name:"SelectListModal",
        options: { styleIsolation: 'shared' },
        emits:["confirm"],
        components:{BaseModal},
        data:()=>{ 
            return {
                keyword:"",
                dialogShow:false,
                page:1,
                selList:[],
                selListObj:[],
                inList:[],
                queryParam:{},
                requestUrl:"",
                method:"POST",
            }
        },
        props:{
            title:String,
            list:Array,
            defalutChecked:{
                type:Array,
                default:()=>[]
            },
            pageCount:{
                default:20,
                type:Number
            },
            labelKey:{
                default:"label",
                type:String
            },
            valueKey:{
                default:"value",
                type:String
            },
            afterRequest:Function,
            multiple:{
                default:true,
                type:Boolean
            },
            searchKey:Array,
            allowCutsom:Boolean
        },
        watch:{
            list(oldValue,newValue){
                console.log(oldValue,newValue)
            },
            defalutChecked(oldValue,newValue){
                console.log(oldValue,newValue)
            }
            
        },
        mounted() {
            this.inList=this.list
        },
        computed:{
            cuttomData(){
                let data={}
                data[this.valueKey]=-1
                data[this.labelKey]=this.keyword
                return data
            }
        },
        methods: {
            handlerCutsomItem(itemTable){

            },
            handleSearch(keyword){
                this.keyword=keyword
                this.queryParam={...this.queryParam,keyword:keyword,searchKey:this.searchKey}
                this.getDataReq()
            },
            handlerCheckBoxChange(detail){
                console.log(detail)
            },
            handlerClickItem(item){
                const value=item[this.valueKey]
                console.log(value)
                if(this.multiple===false){
                    this.selList=[value]
                    this.selListObj=[item]
                }else{
                    const idx=this.selList.indexOf(value)
                    if(idx<0){
                        this.selList.push(value)
                        this.selListObj.push(item)
                    }else{
                        this.selList.splice(idx,1)
                        this.selListObj.splice(idx,1)
                    }

                }
            },
            async open(params:{url:String,list?:Array<any>,method:string,param:{}}){
                this.selList=[...this.defalutChecked]
                if(params.list && params.list.length>0){
                    this.inList=params.list
                }else{
                    if(params.url && params.url.length>0){
                        this.queryParam={...this.queryParam,...params.param}
                        this.requestUrl=params.url
                        this.method=params.method
                        this.getDataReq()
                    }
                }
                this.dialogShow=true
            },
            async getDataReq(){
                const postData={...this.queryParam,page:this.page,page_count:this.pageCount}
                let res={}
                if(this.method==="GET"){
                    res=await MyHttps.get(this.requestUrl,postData)
                }else{
                    res=await MyHttps.post(this.requestUrl,postData)
                }
                if(this.afterRequest){
                    this.inList=this.afterRequest(res)
                }else{
                    this.inList=res
                }
            },
            handlerConfirm(){
                const Objectlist=this.selListObj.map(e=>{
                    return {label:e[this.labelKey],value:e[this.valueKey],...e}
                })
                const res={
                    list:JSON.parse(JSON.stringify(this.selList)),
                    objList:Objectlist
                }
                this.$emit("confirm",JSON.parse(JSON.stringify(res)))
            }
        }
    }
</script>

<style lang="scss" scoped>
    .list-box{
        height: 100%;
    }

    .seacrch-box{
        margin: 20upx 0; 
    }
    .check-item{
        display: flex;
        align-items: center;
        ::v-deep .u-checkbox-label--left{
            pointer-events: none;
        }
    }
    

</style>